<script setup lang='ts'>
import { ref, nextTick } from "vue"
import { ElMessage } from "element-plus"
import { accountAllocateRoleApiPost } from "@/api/userMangement"
defineOptions({
  name: 'addListAd'
})


const props = defineProps({
  roleList: {
    type: Array as any,
    default: () => []
  }
})
const checkAll = ref(false)
const disabledValue = ref()
const isIndeterminate = ref(true)
const checkedCities = ref([])
const rolePerData = ref({
  accountId: null,
  roleCodeList: []
})
const handleCheckAllChange = (val: boolean) => {
  console.log(val);

  checkedCities.value = val ? props.roleList.map((it: any) => it.code) : []
  if (disabledValue.value) {
  
    checkedCities.value = Array.from(new Set([...checkedCities.value, 'ROLE_BASE']))
    
  }
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: string[]) => {
  console.log(value);

  const checkedCount = value.length
  checkAll.value = checkedCount === props.roleList.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < props.roleList.length
}
const dialogBasic = ref({
  title: "角色分配",
  visible: false,
  width: 600,
  height: 300,
  showFooter: true,
  marginTop: "10vh",
})

//显示弹框
const show = (type: string, row?: any, list?: any) => {
  dialogBasic.value.visible = true
  rolePerData.value.accountId = row.id
  nextTick(() => {
    checkedCities.value = list
    disabledValue.value = list.filter((item: string) => item == 'ROLE_BASE')
  })
}
const onClose = () => {
  checkedCities.value = []
  rolePerData.value.accountId = null
  checkAll.value = false
  rolePerData.value.roleCodeList = []
  dialogBasic.value.visible = false
  disabledValue.value = []
}
const onConfirm = async () => {
  console.log(rolePerData.value);

  // dialogBasic.value.visible = false
  rolePerData.value.roleCodeList = Array.from(new Set([...checkedCities.value]))
  try {

    const res = await accountAllocateRoleApiPost(rolePerData.value)
    if (res.code == 20000) {
      onClose()
      ElMessage({
        type: "success",
        message: "用户角色配置成功"
      })
    }
  } catch (error) {
    ElMessage({
      type: "warning",
      message: "用户角色配置失败 请重试！"
    })
  }

}
defineExpose({
  show
})
</script>

<template>
  <SysDialog :title="dialogBasic.title" :width="dialogBasic.width" :height="dialogBasic.height"
    :show-footer="dialogBasic.showFooter" :visible="dialogBasic.visible" :margin-top="dialogBasic.marginTop"
    @on-close="onClose" @on-confirm="onConfirm">
    <template v-slot:content>
      <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全部选择</el-checkbox>
      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-row>
          <el-col v-for="code in roleList" :key="code.id" :span="6">
            <el-checkbox :label="code.name" :value="code.code" :disabled="code.code == 'ROLE_BASE'"></el-checkbox>
          </el-col>
        </el-row>

      </el-checkbox-group>
    </template>
  </SysDialog>
</template>

<style lang='scss' scoped></style>
